<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="page">
    <button data-path="/">主页</button>
    <button data-path="/news">新闻</button>
    <button data-path="/movies">电影</button>
</div>
<div class="detail"></div>
<script>
    const router = [
        {path:'/',component:'主页',detail:'这里是主页'},
        {path:'/news',component:'新闻',detail:'这里是新闻'},
        {path:'/movies',component:'电影',detail:'这里是电影'}
    ]
    const detail = document.querySelector('.detail')
    const btns = document.querySelectorAll('.page button')
    btns.forEach(btn=>{
        btn.addEventListener('click',function(){
            history.pushState(null,null,this.dataset.path)
            router.forEach(item=>{
                if(item.path===this.dataset.path){
                    detail.innerHTML = item.detail
                }
            })
        })
    })

//    通过window.onpopstate监听路由的切换
    window.onpopstate = function (){
        const path = location.pathname
        router.forEach(item=>{
            if(item.path===path){
                detail.innerHTML = item.detail
            }
        })
    }
</script>
</body>
</html>